<script setup>
import { ref, reactive, onMounted } from 'vue'
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import CategoryTabs from './components/CategoryTabs.vue'
import ContentGrid from './components/ContentGrid.vue'
import { getHomeFeeds } from './services/homeFeedsAppi'

// 组件挂载时获取初始数据
onMounted(() => {
  fetchContentData('推荐')
})

// 当前选中的分类 - 使用ref创建响应式数据
// ref用于基本数据类型，如字符串、数字、布尔值
const activeCategory = ref('推荐')

// 帖子数据
const contentData = ref([])

// 获取内容数据的异步函数
const fetchContentData = async (category = '推荐') => {
  try {

    const result = await getHomeFeeds({
      category: category
    })

    if (result.success) {
      contentData.value = result.data
      console.log('✅ API调用成功，获取到数据:', result.data.length, '条')
    } else {
      throw new Error('获取数据失败')
    }
  } catch (err) {
    console.error('获取内容失败:', err)
  }
}

// 分类数据 - 定义所有可用的分类标签
// 这是一个静态数组，包含小红书常见的分类
const categories = [
  '推荐', '学习', '生活', '美食', '穿搭', '旅行', '运动', '娱乐', '职场', '情感'
]

// 切换分类函数 - 处理分类切换逻辑
// 这是一个事件处理函数，当用户点击分类标签时调用
const switchCategory = (category) => {
  // 更新当前激活的分类
  activeCategory.value = category
  // 这里可以添加根据分类筛选内容的逻辑
  console.log('切换到分类:', category)
}
</script>

<template>
  <!-- 应用根容器 - 整个应用的包装器 -->
  <div class="app">
    <!-- 顶部导航栏组件 - 包含Logo、搜索框、用户操作 -->
    <Header />
    
    <!-- 主容器 - 使用flex布局，包含侧边栏和主内容区 -->
    <div class="main-container">
      <!-- 左侧导航栏组件 - 包含主要功能入口 -->
      <Sidebar />
      
      <!-- 主内容区域 - 包含分类标签和内容网格 -->
      <div class="content-area">
        <!-- 分类标签栏组件 - 传递数据和事件 -->
        <!-- :categories 是props传递，将categories数组传递给子组件 -->
        <!-- :active-category 是props传递，将当前激活的分类传递给子组件 -->
        <!-- @switch-category 是事件监听，监听子组件发出的switch-category事件 -->
        <CategoryTabs 
          :categories="categories" 
          :active-category="activeCategory"
          @switch-category="switchCategory"
        />
        
        <!-- 内容网格组件 - 传递内容数据 -->
        <!-- :content-data 是props传递，将内容数据传递给子组件 -->
        <ContentGrid :content-data="contentData" />
      </div>
    </div>
  </div>
</template>

<style>
/* 全局样式重置 - 移除所有默认边距和内边距 */
/* 这是CSS重置，确保在不同浏览器中显示一致 */
* {
  margin: 0;           /* 移除所有默认外边距 */
  padding: 0;          /* 移除所有默认内边距 */
  box-sizing: border-box; /* 使用border-box模型，包含边框和内边距在宽度计算中 */
}

/* 设置全局字体和背景 */
body {
  /* 设置字体族，按优先级排列，确保在不同系统上都有合适的字体 */
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: white; /* 设置背景色为白色 */
}

/* 应用根容器样式 */
.app {
  min-height: 100vh; /* 最小高度为视口高度，确保页面占满整个屏幕 */
}

/* 主容器样式 - 使用flex布局实现整体布局 */
.main-container {
  display: flex;      /* 使用flex布局，子元素水平排列 */
  width: 100%;        /* 宽度占满父容器 */
  padding-top: 60px;  /* 顶部内边距，为固定头部留出空间 */
  box-sizing: border-box; /* 包含内边距在宽度计算中 */
}

/* 内容区域样式 */
.content-area {
  flex: 1;            /* 占据剩余空间，让内容区域自适应 */
  margin-left: 80px;  /* 左侧外边距，为侧边栏留出空间 */
  padding: 0;         /* 无内边距 */
  background: white;   /* 背景色为白色 */
  min-width: 0;       /* 防止flex项目收缩，确保内容正常显示 */
}
</style>